<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { ODropdown, ODropdownItem, OIcon } from '@opensig/opendesign';
import { NAVS } from '@/config/nav.ts';
import IconOutlink from '~icons/app/icon-outlink.svg';
import { $t } from '@/i18n';
import { useMeetingStore } from '@/stores/meeting';
import { useRoute } from 'vitepress';
// -------------------- hover事件 --------------------
const activeIndex = ref(-1);
const onMouseEnter = (idx: number) => {
  activeIndex.value = idx;
};
const onMouseLeave = () => {
  activeIndex.value = -1;
};
// -------------------- 选中事件 --------------------
const selectedIndex = ref(-1);
const route = useRoute();

const getSelectedIndex = () => {
  const path = route.path.split('/').slice(0, 2).join('/');
  selectedIndex.value = navs.value.findIndex(nav => {
    return nav.children?.some(item => {
      return item.href === path;
    });
  });
};

onMounted(() => {
  getSelectedIndex();
});

watch(
  () => route.path,
  () => {
    getSelectedIndex();
  },
);

// -------------------- 过滤NAVS --------------------
const meetingStore = useMeetingStore();
const filterPerm = (navItem: any, permMap: any) => {
  if (navItem.checkPermKey) {
    return permMap[navItem.checkPermKey];
  }
  return true;
};

const navs = computed(() => {
  const path = [] as string[];
  let currentNavs = [];
  const permMap = {
    'meeting': meetingStore.hasPerm,
  };
  try {
    currentNavs = NAVS.filter(navItem => filterPerm(navItem, permMap)).map(function fn(navItem: any) {
      path.push(navItem.label);
      const res = {
        ...navItem,
        _path: [...path],
      };
      if (navItem.children) {
        res.children = navItem.children.filter(navItem => filterPerm(navItem, permMap)).map(fn);
      }
      path.pop();
      return res;
    });
  } catch {
    currentNavs = NAVS;
  }
  return currentNavs;
});
</script>

<template>
  <nav class="header-nav">
    <ul class="nav-list">
      <li
        v-for="(item, idx) in navs"
        :key="item.id"
        :id="item.id"
        class="nav-item"
        :class="{
          'is-selected': selectedIndex === idx,
          'is-active': activeIndex === idx,
        }"
        @mouseenter="onMouseEnter(idx)"
        @mouseleave="onMouseLeave"
      >
        <a class="info-wrap clickable" v-if="!item.children?.length && item.href" :href="item.href">
          <span>
            <span>{{ item.label }}</span>
          </span>
        </a>
        <ODropdown v-else trigger="hover" optionPosition="bl" option-wrap-class="navs-dropdown">
          <div class="info-wrap">
            <span>
              <span>{{ item.label }}</span>
            </span>
          </div>
          <template #dropdown>
            <div v-for="(childTab, index) in item.children" :key="index" @mouseenter="onMouseEnter(idx)"
                 @mouseleave="onMouseLeave">
              <ODropdownItem v-if="childTab.disabled">
                <div class="tab-disabled">
                  <span>{{ childTab.label }}</span>
                  <span class="disabled-tag">{{ $t('header.notOnline') }}</span>
                </div>
              </ODropdownItem>
              <ODropdownItem v-else>
                <a :href="childTab.href" class="dropdown-link" :target="childTab.jumpOut ? '_blank' : '_self'">
                  {{ childTab.label }}
                  <OIcon v-if="childTab.jumpOut" class="jump-out-icon">
                    <IconOutlink />
                  </OIcon>
                </a>
              </ODropdownItem>
            </div>
          </template>
        </ODropdown>
      </li>
    </ul>
  </nav>
</template>


<style lang="scss" scoped>
.header-nav {
  height: 100%;
}

.nav-list {
  display: flex;
  height: 100%;
  margin-left: var(--o-gap-5);
}

.nav-item {
  position: relative;
  height: 100%;
  @include text1;
  color: var(--o-color-info1);
  pointer-events: auto;
  transition: color var(--o-duration-s) var(--o-easing-standard);

  a {
    color: var(--o-color-info2);
    display: flex;
    align-items: center;
    transition: color var(--o-duration-s) var(--o-easing-standard);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    width: 2em;
    height: 2px;
    border-radius: 2px;
    background-color: var(--o-color-primary1);
    transition: opacity var(--o-duration-m2) var(--o-easing-standard);
    opacity: 0;
  }

  &.is-active,
  &.is-selected {
    color: var(--o-color-primary1);

    &::after {
      opacity: 1;
    }
  }

  &.is-selected,
  &.is-active {
    font-weight: 500;
  }

  &.nav-contest {
    display: flex;
    align-items: center;
    margin-left: 24px;
    cursor: default;

    .contest-divider {
      --o-divider-label-gap: 0 24px 0 0;
    }
  }
}

.o-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
}

.o-dropdown-item {
  @include text1;
  min-width: 124px;
  white-space: nowrap;
  --dropdown-item-padding: 6px 12px;
  --dropdown-item-justify: flex-start;
  --dropdown-item-color-hover: var(--o-color-primary1);
}

.dropdown-link {
  color: inherit;
  display: flex;
  align-items: center;
}

.jump-out-icon {
  --icon-size: 16px;
  margin-left: 4px;
}

.info-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--o-gap-4);
  color: var(--o-color-info2);

  &:hover {
    color: var(--o-color-primary1);
  }

  & > span {
    height: 30px;
    display: flex;
    align-items: flex-end;
    @include respond-to('pad_h') {
      height: 28px;
    }
  }

  &.clickable {
    cursor: pointer;
  }
}


.tab-disabled {
  color: var(--o-color-info4);
  display: flex;
  align-items: center;
  cursor: not-allowed;

  .disabled-tag {
    margin-left: var(--o-gap-1);
    border: 1px solid rgba(224, 226, 230, 1);
    border-radius: var(--o-radius-xs);
    font-size: 10px;
    color: var(--o-color-info3);
    height: 16px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

<style lang="scss">
.navs-dropdown {
  border-radius: 4px;
}
</style>
